<div class="row">
	<div class="col-lg-12">
		<h1 class="page-header">总览</h1>
	</div>
	<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
	<div class="col-lg-3 col-md-6">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<div class="row">
					<div class="col-xs-3">
						<i class="fa fa-user fa-5x"></i>
					</div>
					<div class="col-xs-9 text-right">
						<div class="huge"><?php echo $playerAllCounter?></div>
						<div>总玩家</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-3 col-md-6">
		<div class="panel panel-green">
			<div class="panel-heading">
				<div class="row">
					<div class="col-xs-3">
						<i class="fa fa-user-plus fa-5x"></i>
					</div>
					<div class="col-xs-9 text-right">
						<div class="huge"><?php echo $playerNewCounter?></div>
						<div>今日新增玩家</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-3 col-md-6">
		<div class="panel panel-yellow">
			<div class="panel-heading">
				<div class="row">
					<div class="col-xs-3">
						<i class="fa fa-users fa-5x"></i>
					</div>
					<div class="col-xs-9 text-right">
						<div class="huge"><?php echo $playerLoginCounter?></div>
						<div>今日活跃玩家</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-lg-3 col-md-6">
		<div class="panel panel-danger">
			<div class="panel-heading">
				<div class="row">
					<div class="col-xs-3">
						<i class="fa fa-user-md fa-5x"></i>
					</div>
					<div class="col-xs-9 text-right">
						<div class="huge"><?php echo $playerOnlineCounter?></div>
						<div>当前在线</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-lg-12 col-md-12">
		<select class="form-control" id="loginChannel" style="width:250px;float:left;" defaultVal="">
			<?php foreach($loginChannels as $_c => $_k){?>
				<option value="<?php echo $_c?>"><?php echo $_k?></option>
			<?php }?>
		</select>
		<button onclick="linkPage('admin/dashboard', {'askForLiucun':1, 'loginChannel':$('#loginChannel').val()})" class="btn btn-primary" type="button">查看留存</button>
		<button onclick="linkPage('admin/dashboard', {'askForPay':1, 'loginChannel':$('#loginChannel').val()})" class="btn btn-success" type="button">查看付费</button>
	</div>
</div>
<br>

<?php if(isset($liucun)){?>
<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading"> 当前留存统计[<?php echo $liucunDt?>][<?php echo $loginChannelName?>] </div>
			<div class="panel-body">
				<table width="100%" class="table table-striped table-bordered table-hover" id="dataTable1">
					<thead>
					<tr>
						<?php 
						$i = 0;
						foreach($liucun as $_k => $_d){?>
							<th><?php echo $_k ?>[<?php echo ($liucunDay[$i] == 2 ? "次" : $liucunDay[$i])?>日留存]</th>
							<?php $i++;?>
						<?php }	?>
					</tr>
					</thead>
					<tbody>
						<?php foreach($liucun as $_k => $_d){?>
							<td><?php echo round($_d*100, 2) ?>%</td>
						<?php }	?>
					</tbody>
				</table>
				<button onclick='saveSnapshot("<?php echo $liucunDt?>", 1, <?php echo $liucunData?>)' class="btn btn-primary" type="button">保存快照</button>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading"> 留存统计图表[<?php echo $loginChannelName?>] </div>
			<div class="panel-body">
				<div id="chart1"></div>
				<div class="btn-group" data-toggle="buttons">
					<?php foreach($chartColumn as $_k => $_d){?>
					<label class="btn btn-primary active">
					<input name="chart1Filter" type="checkbox" value="<?php echo $_k?>" autocomplete="off" checked value2="<?php echo $_d?>"><?php echo $_d?></label>
					<?php }?>
				</div>
				<br><br>
				<button onclick='filterLiucunChart("all")' class="btn btn-primary" type="button">所有</button>
				<button onclick='filterLiucunChart("year")' class="btn btn-primary" type="button">年</button>
				<button onclick='filterLiucunChart("month")' class="btn btn-primary" type="button">月</button>
				<button onclick='filterLiucunChart("week")' class="btn btn-primary" type="button">周</button>
				<button onclick='filterLiucunChart("day")' class="btn btn-primary" type="button">日</button>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading"> 留存统计快照[<?php echo $loginChannelName?>] </div>
			<div class="panel-body">
				<table width="100%" class="table table-striped table-bordered table-hover" id="dataTable2">
					<thead>
					<tr>
						<th>快照时间</th>
						<th>次日留存</th>
						<th>3日留存</th>
						<th>4日留存</th>
						<th>5日留存</th>
						<th>6日留存</th>
						<th>7日留存</th>
						<th>14日留存</th>
						<th>30日留存</th>
						<th>操作</th>
					</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
<?php }?>

<?php if(isset($paydata)){?>
<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading"> 付费统计[<?php echo $payDt?>] </div>
			<div class="panel-body">
				<table width="100%" class="table table-striped table-bordered table-hover" id="dataTable3">
					<thead>
					<tr>
						<?php 
						$payType = ['pay_rate'=>'付费率', 'pay_rmb'=>'付费额', 'arpu'=>'ARPU', 'arppu'=>'ARPPU'];
						foreach($paydata as $_k => $_d){?>
							<th><?php echo $payType[$_k]?></th>
						<?php }	?>
					</tr>
					</thead>
					<tbody>
						<?php 
						foreach($paydata as $_k => $_d){?>
							<?php if(in_array($_k, ['pay_rmb', 'arpu', 'arppu'])){?>
							<td><?php echo $_d ?></td>
							<?php }else{?>
							<td><?php echo $_d*100 ?>%</td>
							<?php }?>
						<?php }	?>
					</tbody>
				</table>
				<button onclick='saveSnapshot("<?php echo $payDt?>", 2, <?php echo $payData?>)' class="btn btn-primary" type="button">保存快照</button>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading"> 当前留存统计图标 </div>
			<div class="panel-body">
				<div id="chart1"></div>
				<button onclick='filterPayChart("all")' class="btn btn-primary" type="button">所有</button>
				<button onclick='filterPayChart("year")' class="btn btn-primary" type="button">年</button>
				<button onclick='filterPayChart("month")' class="btn btn-primary" type="button">月</button>
				<button onclick='filterPayChart("week")' class="btn btn-primary" type="button">周</button>
				<button onclick='filterPayChart("day")' class="btn btn-primary" type="button">日</button>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading"> 付费统计快照 </div>
			<div class="panel-body">
				<table width="100%" class="table table-striped table-bordered table-hover" id="dataTable2">
					<thead>
					<tr>
						<th>快照时间</th>
						<th>付费率</th>
						<th>付费额</th>
						<th>ARPU</th>
						<th>ARPPU</th>
						<th>操作</th>
					</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
<?php }?>

<script>
var gTable2;
var showType = <?php echo @$showType?>*1;
var loginChannel = '<?php echo @$loginChannel?>';
<?php if(isset($chartData)){?>
var chartData = <?php echo json_encode($chartData, JSON_UNESCAPED_UNICODE )?>;
var chartYkeys = <?php echo json_encode(array_keys($chartColumn), JSON_UNESCAPED_UNICODE )?>;
var chartLabels = <?php echo json_encode(array_values($chartColumn), JSON_UNESCAPED_UNICODE )?>;
<?php }?>
$(document).ready(function(){
	<?php if(isset($loginChannel)){?>
	$("#loginChannel").val('<?php echo $loginChannel?>');
	<?php }?>
	
	if(showType == 1){
		var columns = [
            { "data": "dt" },
            { "data": "liucun2" },
            { "data": "liucun3" },
			{ "data": "liucun4" },
			{ "data": "liucun5" },
			{ "data": "liucun6" },
			{ "data": "liucun7" },
			{ "data": "liucun14" },
			{ "data": "liucun30" },
			{ "data": "op", "orderable": false  },
        ];
	}else if(showType == 2){
		var columns = [
            { "data": "dt" },
            { "data": "pay_rate" },
            { "data": "pay_rmb" },
			{ "data": "arpu" },
			{ "data": "arppu" },
			{ "data": "op", "orderable": false  },
        ];
	}
	
	if(showType > 0){
		showChart(chartData, chartYkeys, chartLabels);
	}
	
	$("[name=chart1Filter]").change(function(){
		var _chartYkeys = [];
		var _chartLabels = [];
		$("[name=chart1Filter]:checked").each(function(){
			_chartYkeys.push($(this).val());
			_chartLabels.push($(this).attr("value2"));
		});
		showChart(chartData, _chartYkeys, _chartLabels);
	});
	
    gTable2 = $('#dataTable2').DataTable({
		"processing": true,
        "serverSide": true,
        "ajax": {
            "url": "/admin/ajaxShowStatSnapshot",
			"type": "POST",
            "data": function ( d ) {
                d.type = "<?php echo $showType?>";
				d.loginChannel = loginChannel;
            }
        },
		"columns": columns,
		"pageLength": 25
	});
	
});

function filterLiucunChart(type){
	linkPage('admin/dashboard', {'askForLiucun':1, 'loginChannel':loginChannel, 'timeTypes':type});
}

function filterPayChart(type){
	linkPage('admin/dashboard', {'askForPay':1, 'loginChannel':loginChannel, 'timeTypes':type});
}

function saveSnapshot(dt, type, data){
	var param = {};
	param.dt = dt;
	param.type = type;
	param.data = data;
	param.loginChannel = loginChannel;
	
	commonSend('ajaxStatSnapshot', param, '保存成功', false, function(ret){
		if(ret.err == 'ok'){
			gTable2.draw();
		}
	});
}

function delSnapshot(id){
	if(!confirm('是否删除快照？'))
		return;
	var param = {};
	param.id = id;
	
	commonSend('ajaxDelStatSnapshot', param, '删除成功', false, function(ret){
		if(ret.err == 'ok'){
			gTable2.draw();
		}
	});
}

function showChart(data, ykeys, labels){
	$("#chart1 *").remove();
	new Morris.Line({
		element: 'chart1',
		data: data,
		xkey: 'dt',
		ykeys: ykeys,
		labels: labels,
		smooth: false,
		lineColors: ['#0b62a4', '#7A92A3', '#4da74d', '#afd8f8', '#edc240', '#cb4b4b', '#9440ed', '#D86335'],
	});
}
</script>